<template>
    <div>
        <div class="breadcrumb">
            <Breadcurumb />
        </div>
        <div class="bg">
      
    <el-row>
      <el-col :span="4">
        <el-input v-model="uname"
                  placeholder="请输入内容"></el-input>
      </el-col>
      <el-col :span="20"
              style="padding-left:10px">
        <el-button type="success"
                   @click="loadData">搜索</el-button>
        <el-button type="warning"
                   @click="handleDelAll">批量删除</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-table :data="tableData"
                  style="width: 100%"
                  @selection-change="handleSelectionChange">
          <el-table-column type="selection"
                           width="55">
          </el-table-column>
          <el-table-column width="180"
                           label="头像">
            <template slot-scope="scope">
              <img :src="scope.row.HeadIocUrl"
                   width="100"
                   height="100"
                   alt="">
            </template>
          </el-table-column>
          <el-table-column prop="UserName"
                           label="用户名"
                           width="180">
          </el-table-column>
          <el-table-column prop="PassWord"
                           label="密码"
                           width="180">
          </el-table-column>
          <el-table-column label="状态"
                           width="180">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.Status"
                        @change="handleChange(scope.row.Uid,scope.row.Status)"
                         active-text="启用"
                         inactive-text="禁用">
              </el-switch>
            </template>
          </el-table-column>

          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini"
                         @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button size="mini"
                         type="danger"
                         @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-pagination @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="pageindex"
                       :page-sizes="[1, 2, 5, 10]"
                       :page-size="pagesize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="totalcount">
        </el-pagination>
      </el-col>
    </el-row>
  </div>
    </div>
 
</template>

<script type="text/ecmascript-6">
//引导组件（页面）
import Breadcurumb from '../components/Breadcrumb.vue'

export default {
  data() {
    return {
      uname: '', //查询用户名
      pageindex: 1, //页码
      pagesize: 2, //页容量
      totalcount: 0, //总条数
      tableData: [], //数据
      ids: [], //存放的是选中的数据
    }
  },
  components: {
      //将组件  挂 载到Vue 上
      Breadcurumb
  },
  methods: {
    loadData() {
      this.$axios
        .get('http://localhost:54080/api/page', {
          params: {
            //?uname=&pageindex=1&pagesize=2
            uname: this.uname,
            pageindex: this.pageindex,
            pagesize: this.pagesize,
          },
        })
        .then((res) => {
          this.tableData = res.data.list
          this.totalcount = res.data.totalcount
        })
    },
    //当页容量发生变化时 触发
    handleSizeChange(val) {
      this.pagesize = val
      this.loadData()
      //console.log(`每页 ${val} 条`);
    },
    //当页码发生变时触发
    handleCurrentChange(val) {
      this.pageindex = val
      this.loadData()
      //console.log(`当前页: ${val}`);
    },
    handleEdit(index, row) {
      //单个数据 传输
      //this.$router.push('/edit/'+row.Uid);

      //对象数据 传输
      this.$router.push({
        path: 'editnew',
        query: row,
      })

      //this.$router.push('/edit?id=123')
      //this.$router.push({
      //    path:'/edit',
      //    query:row
      //});
      console.log(index, row)
    },
    handleDelete(index, row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          //删除操作 连接API
          this.$axios
            .get(`http://localhost:54080/api/del?id=${row.Uid}`)
            //.get('http://localhost:54080/api/del?id=' + row.Uid)
            .then((res) => {
              if (res.data > 0) {
                this.loadData()
              } else {
                this.$message.error('删除失败')
              }
            })
          this.$message({
            type: 'success',
            message: '删除成功!',
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })

      console.log(index, row)
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
      for (let index = 0; index < val.length; index++) {
        this.ids.push(val[index].Uid)
      }
    },
    handleDelAll() {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          //删除操作 连接API
          this.$axios
            .get(`http://localhost:54080/api/delall?ids=${this.ids.toString()}`)
            //.get('http://localhost:54080/api/del?id=' + row.Uid)
            .then((res) => {
              if (res.data > 0) {
                this.$message({
                  type: 'success',
                  message: '删除成功!',
                })
                this.loadData()
              } else {
                this.$message.error('删除失败')
              }
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    handleChange(uid,status){
        console.log(uid,status);
    }
  },
  created() {
    this.loadData()
  },
}
</script>

<style scoped>
.bg {
  background-color: white;
  padding: 10px;
}
.breadcrumb{
    padding: 10px;
    background-color: white;
}
</style>
